<template>
  <div class="contact-box">
    <el-form :model="information" :rules="rules" label-position="left" label-width="85px" ref="form" >
      <el-form-item label="联系人姓名" prop="name">
        <el-input v-model="information.name" type="text" name="name"  ></el-input>
      </el-form-item>
			<el-form-item label="手机号" prop="phoneNumber">
        <el-input v-model="information.phoneNumber" type="text" name="phoneNumber"></el-input>
        <span class="hint">（接受预定通知）</span>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts">
import { defineComponent,ref } from 'vue'

export default defineComponent({
	setup() {
    const form = ref(null);
    const information = ref({
      name: '',
			phoneNumber: ''
    });
    //自定义表单验证
    const checkName = (rule:any, value:any, callback:any) => {
       if (!value) {
        return callback(new Error("姓名不能为空"));
      }
      let r =/^[\u4E00-\u9FFF]{2,6}$/;
      if (!r.test(value)) {
        return callback(new Error("姓名应该为2到6个汉字"));
      }
      callback();
    };
    const checkPhoneNumber = (rule:any, value:any, callback:any) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      }
      let r =/^\d{11}$/;
      if (!r.test(value)) {
        return callback(new Error("手机号应该为11位数字"));
      }
      callback();
    };
    const rules = {
        name: [{validator: checkName, trigger: 'change'}],
        phoneNumber : [{validator: checkPhoneNumber, trigger: 'change'}]
    };
    return{
      form,
      information,
      rules
    };
  },
});
</script>
<style lang="scss" scoped>
  @import '@/assets/css/config.scss';
 
	.contact-box{
		width: 660px;
		padding: 30px 20px;
		border: 1px solid $themeLightGray;
	}
  .el-form{
    padding-left: 30px;
  }
  .hint{
    color: gray;
  }
  .el-input{
    width: 320px;
  }
	:deep(input:focus.el-input__inner){
		border-width: 1px !important;
		border-radius: 5px;
	}
	:deep(.el-input__inner){
		border-width: 0 0 1px 0;
		border-radius: 0;
	}  
</style>

